<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../css/layui.css" rel="stylesheet" media="all">
</head>
<body>
<div class="layui-row" id="updateTest" style="display:none;" >
	<div class="layui-col-md10">
		<form class="layui-form layui-from-pane" lay-filter="edit" action="" style="margin-top:20px" >
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select name="status"  lay-verify="required" lay-search>
							<option value="1">正常</option>
							<option value="0">封禁</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="add_btn" lay-submit lay-filter="demo11">提交修改</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
	<div class="layui-clear-space">
		<a class="layui-btn layui-btn-xs" lay-event="edit">管理</a>
	</div>
</script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/layui.js" charset="utf-8"></script>
<script src="../js/axios.js"></script>
<script>
	layui.use(['table','form'],function(){
		var table=layui.table;
		var form=layui.form;
		table.render({
			elem:'#test',
			url:'../../member?op=findPage',
			toolbar:'default',
			title:'',
			cellMinWidth:120,
			id:'test',
			page:true,
			page:{limits:[3,5,7]},

			cols:[[
				{type:'checkbox',fixed:'center'},
				{field:'mno',title:'编号',fixed:'center',unresize:true,sort:true,align:'center'},
				{field:'nickName',title:'用户名',fixed:'center',align:'center'},
				{field:'tel',title:'电话',fixed:'center',align:'center'},
				{field:'email',title:'邮件',fixed:'center',align:'center'},
				{field:'status',title:'状态',fixed:'center',align:'center',templet:function (data) {
						if (data.status == "1") {
							return "正常"
						} else if (data.status == "0") {
							return "封禁"
						} else {
							return "异常"
						}
					}},
				{field:'aa',title:'操作',templet:"#barDemo"}

			]]
		});
		table.on('toolbar(test)',function(obj){
			var checkStatus=table.checkStatus(obj.config.id),data=checkStatus.data;
			switch(obj.event){
				case 'add':
					layer.msg('添加');
					break;
				case 'update':
					console.log(data);
					break;
				case 'delete':
					layer.confirm('数据一但删除不可恢复，您确定删除吗？',{icon:3,title:'确认'},function(index){
						var arr =[];
						for(var i = 0; i<data.length;i++){
							arr.push(data[i].id);
						}
						console.log(arr);
						layer.close(index);
						table.reload('test',{
							where:{id:1002,status:2},
							page: {
								curr:1
							}
						});
					})
					break;

			}
		});


		table.on('tool',function (obj) {
			var data=obj.data;
			console.log(obj);
			if (obj.event == 'edit') {
				layer.open({
					//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					id: 'update',
					type: 1,
					title: "修改商品信息",
					area: ['50%', '90%'],
					content: $("#updateTest"),//引用的弹出层的页面层的方式加载修改界面表单

					success: function (msg) {
						console.log(msg);

						//表单数据回显
						form.val("edit", data);
					},

				});
				setMenber(obj,data);
			}
		})

		function setMenber(obj,data) {
			form.on('submit(demo11)', function (massage) {
				$.ajax({
					url: '../../member?op=update',
					type: 'POST',
					data: {
						status: massage.field.status,
						mno:data.mno,
						nickName: data.nickName,
						tel:data.tel,
						email:data.email,
					},
					success: function (msg) {
						console.log(msg)
						if (msg == "1"){
							alert("修改成功");
							layer.close('update');
							table.reload('test',{  //表格重载，刷新数据 test是数据表格的id
								url:'../../member?op=findPage',
								page: {
									curr:1
								}
							});
						}

					}
				});
			});
		}
	});
</script>
</body>
</html>